<html>
<head>
<script src="/pages/maps/jquery-1.11.0.min.js"></script>
<meta http-equiv="refresh" content="5; URL=/pages/maps/imageViewer.html">
</head>
<body>
	<p>This page is being auto reloaded after 5 seconds</p>
	<img id="viewer" src="" width="640px"/>
	<div id="info"> </div>
<script>
$(function() {

	var baseUrl = "/pages/maps/";
	var pictureIndex = 0;
	var pictures = [];

	jQuery.fn.reverse = function() {
		return this.pushStack(this.get().reverse(), arguments);
	};
	function getFiles() {
		$.ajax(baseUrl).success(function(data) {
			pictures = [];
			$(data).find("a[href]").reverse().each(function() {
				var href = $(this).attr('href');
				if (href.indexOf('.jpg') > 0 || href.indexOf('.png') > 0 || href.indexOf('.jpeg') > 0) {
					pictures.push(href);
				}
			});
			console.log(pictures.length + " pictures loaded!");
			changePicture(0);
		});
	}

	function changePicture(indexOffset) {
		pictureIndex += indexOffset;
		if (pictureIndex >= pictures.length) {
			pictureIndex = 0;
		} else if (pictureIndex < 0) {
			pictureIndex = pictures.length - 1;
		}
		$('#viewer').attr('src', baseUrl + pictures[pictureIndex]);
		$('#info').text((pictureIndex + 1) + "/" + pictures.length);
	}

	getFiles();
	$(document).keydown(function(e){
		var left = -1, right = 1;
		if (e.keyCode == 37) {
			changePicture(left); return false;
		} else if (e.keyCode == 39) {
			changePicture(right); return false;
		}
	});
});
</script>
</body>
</html>
